<!--
 * @Description: zzb
 * @Version: 0.0.1
 * @Autor: zzb
 * @Date: 2022-12-06 16:13:31
 * @LastEditors: zzb
 * @LastEditTime: 2022-12-20 17:48:49
-->
<template>
  <div class="contribute-container">
    <template v-if="['cz', 'dev'].includes(city_name)">
      <el-row :gutter="32" v-if="componentsName == ''">
        <el-col :xs="24" :sm="24" :lg="24">
          <div class="chart-wrapper">
            <el-form
              :model="queryParams"
              size="small"
              ref="queryForm"
              :inline="true"
              label-width="68px"
            >
              <el-form-item label="统计时间">
                <el-date-picker
                  v-model="queryParams.time"
                  type="month"
                  placeholder="选择月"
                  value-format="yyyy-MM"
                  format="yyyy 年 MM 月"
                >
                </el-date-picker>
              </el-form-item>

              <el-form-item style="marginleft: 20px">
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  size="small"
                  @click="handleQuery"
                  >搜索</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="24">
          <div class="chart-wrapper">
            <div style="display: flex; justify-content: space-between">
              <span class="ib spantitle">各部门发稿积分统计</span>
              <span
                class="ib spantitle"
                @click="handleDepDetail('')"
                style="cursor: pointer"
                >详情>></span
              >
            </div>
            <el-divider></el-divider>
            <Chart
              ref="options1"
              :options="options1"
              className="depDetail"
              @handleDepDetail="handleDepDetail"
            ></Chart>
          </div>
        </el-col>

        <el-col :xs="24" :sm="24" :lg="24">
          <div class="chart-wrapper">
            <div style="display: flex; justify-content: space-between">
              <span class="ib spantitle">全公司发稿积分统计</span>
              <span
                class="ib spantitle"
                @click="handleCompanyDetail('')"
                style="cursor: pointer"
                >详情>></span
              >
            </div>
            <el-divider></el-divider>
            <Chart
              :options="options2"
              className="companyDetail"
              @handleCompanyDetail="handleCompanyDetail"
            ></Chart>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="24" v-if="false">
          <div class="chart-wrapper">
            <Chart :options="options3"></Chart>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="24">
          <div class="chart-wrapper">
            <div style="display: flex">
              <span class="ib spantitle">各媒体类型月积分走势图</span>
            </div>
            <el-divider></el-divider>
            <Chart :options="options4"></Chart>
          </div>
        </el-col>
      </el-row>

      <el-col :xs="24" :sm="24" :lg="24" v-else="showDepDetail">
        <component
          :is="componentsName"
          :componentsName.sync="componentsName"
        ></component>
      </el-col>
    </template>
    <span class="no_pro_menu" v-else> 暂无该功能，仅对长治开放 </span>
  </div>
</template>

<script>
import {
  customizeIndex,
  customizeScoreMonthlyTrend,
} from "@/api/extendApplication/contribute";

import Chart from "./components/chart.vue";

import DepDeatil from "./components/depDeatil.vue";
import CompanyDetail from "./components/companyDetail.vue";
import CompanyDetailSix from "./components/companyDetail_six.vue";
import CompanyDetailMt from "./components/companyDetail_mt.vue";
export default {
  name: "Name",
  inject: ["city_name"],

  data() {
    return {
      queryParams: {
        time: this.parseTime(new Date(), "{y}-{m}-{d}"),
      },

      time1: this.parseTime(new Date(), "{y}-{m}"),
      time2: this.parseTime(new Date(), "{y}-{m}"),
      time3: this.parseTime(new Date(), "{y}"),
      options1: {},
      showDepDetail: false,
      componentsName: "",
      depList: [],
      options12: {},
      options13: {},
      options2: {},
      options3: {},
      options4: {},
      depData: {},
      qgsData: {},
      nullData: {},
      mtxlData: {},
      mtlxYearData: {},
    };
  },

  components: {
    Chart,
    DepDeatil,
    CompanyDetail,
    CompanyDetailSix,
    CompanyDetailMt,
  },

  computed: {},

  mounted() {
    this.handleQuery();
    //各单位发稿积分统计
    //全公司发稿积分统计
    // this.getCustomizeIndex();
    //各媒体类型月积分走势图
  },

  watch: {
    value: {
      handler(val) {},
      deep: true,
      immediate: true,
    },
  },

  methods: {
    handleDepDetail(depName) {
      sessionStorage.setItem("cz-depName", depName);
      this.showDepDetail = true;
      this.componentsName = "DepDeatil";
    },
    handleCompanyDetail(companyName) {
      sessionStorage.setItem("cz-depName", companyName);
      this.showDepDetail = true;
      this.componentsName = "CompanyDetail";
    },

    //
    async getCustomizeIndex() {
      await customizeIndex(this.queryParams)
        .then((res) => {
          this.depData = res.deptList;
          this.qgsData = res.ssList;
          this.nullData = res.ssListYear;
          this.mtlxYearData = res.ssListYear;
        })
        .then(() => {
          this.chart1();
          this.chart2();
          this.chart3();
        });
    },
    async handleQuery() {
      //全公司发稿积分统计
      await this.getCustomizeIndex();
      //各媒体类型月积分走势图
      await this.getCustomizeScoreMonthlyTrend();
    },
    chart1() {
      let seriesData = [];
      let legendData = [];
      this.depData.forEach((item) => {
        legendData.push(item.name);
        seriesData.push({
          name: item.name,
          value: item.score,
        });
      });
      console.log("🚀 ~ file: index.vue:124 ~ chart2 ~ seriesData", seriesData);
      this.options1 = {
        title: {
          text: "各部门发稿积分统计",
          left: "center",
          show: false,
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        grid: {
          top: "20%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        legend: {
          // show: false,
          type: "scroll",
          // orient: 'vertical',
          // right: 3,
          // top: 20,
          bottom: 20,
          data: legendData,
        },
        series: [
          {
            name: "部门",
            type: "pie",
            radius: "55%",
            center: ["50%", "50%"],
            data: seriesData,
            labelLine: {
              show: true,
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
    },
    chart12() {
      let seriesData = [];
      let legendData = [];
      this.qgsData.forEach((item) => {
        legendData.push(item.name);
        seriesData.push({
          name: item.name,
          value: item.score,
        });
      });
      this.options12 = {
        title: {
          text: "新闻中心六大板块积分柱状图",
          left: "left",
        },
        tooltip: {
          show: true,
        },
        legend: {
          show: true,
          right: "0",
        },
        grid: {
          top: "20%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          axisLine: {
            show: true,
          },
          axisTick: {
            show: true,
          },
          axisLabel: {
            show: true,
            rotate: -30,
          },
          data: legendData,
        },
        yAxis: {
          type: "value",
          show: true,
          axisLine: {
            show: true,
          },
          axisTick: {
            show: true,
          },
          axisLabel: {
            show: true,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#ddd",
            },
          },
        },
        series: [
          {
            type: "bar",
            name: "积分",
            label: {
              show: true,
              position: "top",
            },
            itemStyle: {
              color: "#1e80ff",
            },
            data: seriesData,
          },
        ],
      };
    },
    chart13() {
      let seriesData = [];
      let legendData = [];
      this.qgsData.forEach((item) => {
        legendData.push(item.name);
        seriesData.push({
          name: item.name,
          value: item.score,
        });
      });
      this.options13 = {
        title: {
          text: "新闻中心六大板块积分柱状图",
          left: "left",
        },
        tooltip: {
          show: true,
        },
        legend: {
          show: true,
          right: "0",
        },
        grid: {
          top: "20%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          axisLine: {
            show: true,
          },
          axisTick: {
            show: true,
          },
          axisLabel: {
            show: true,
            rotate: -30,
          },
          data: legendData,
        },
        yAxis: {
          type: "value",
          show: true,
          axisLine: {
            show: true,
          },
          axisTick: {
            show: true,
          },
          axisLabel: {
            show: true,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#ddd",
            },
          },
        },
        series: [
          {
            type: "bar",
            name: "积分",
            label: {
              show: true,
              position: "top",
            },
            itemStyle: {
              color: "#1e80ff",
            },
            data: seriesData,
          },
        ],
      };
    },
    chart2() {
      let seriesData = [];
      let legendData = [];
      this.qgsData.forEach((item) => {
        legendData.push(item.name);
        seriesData.push({
          name: item.name,
          value: item.score,
        });
      });
      console.log("🚀 ~ file: index.vue:124 ~ chart2 ~ seriesData", seriesData);
      this.options2 = {
        title: {
          text: "全公司发稿积分统计",
          left: "center",
          show: false,
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          right: 10,
          top: 20,
          bottom: 20,
          data: legendData,
        },
        series: [
          {
            name: "部门",
            type: "pie",
            radius: "55%",
            center: ["40%", "50%"],
            data: seriesData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
    },
    chart3() {
      let seriesData = [];
      let legendData = [];
      this.qgsData.forEach((item) => {
        legendData.push(item.name);
        seriesData.push({
          name: item.name,
          value: item.score,
        });
      });
      console.log("🚀 ~ file: index.vue:124 ~ chart2 ~ seriesData", seriesData);
      this.options3 = {
        title: {
          text: "全公司发稿积分统计",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          right: 10,
          top: 20,
          bottom: 20,
          data: legendData,
        },
        series: [
          {
            name: "部门",
            type: "pie",
            radius: "55%",
            center: ["40%", "50%"],
            data: seriesData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
    },
    chart4() {
      let seriesData = [];
      let legendData = [];

      this.mtlxYearData.forEach((item) => {
        legendData.push(item.name);
        let lineItem = {
          name: item.name,
          smooth: true,
          type: "line",
          data: item.month.map((item) => (!item ? 0 : item)),
          animationDuration: 2800,
          animationEasing: "quadraticOut",
        };
        seriesData.push(lineItem);
      });

      this.options4 = {
        title: {
          text: "各媒体类型月积分走势图",
          left: "center",
          show: false,
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: legendData,
          top: 40,
        },
        grid: {
          top: "20%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: seriesData,
      };
    },
    /**没用 */
    chart42() {
      let seriesData = [];
      let legendData = [];

      this.mtxlData.forEach((item) => {
        legendData.push(item.name);
        let lineItem = {
          name: item.name,
          smooth: true,
          type: "line",
          data: item.score.map((item) => (!item ? 0 : item)),
          animationDuration: 2800,
          animationEasing: "quadraticOut",
        };
        seriesData.push(lineItem);
      });

      this.options4 = {
        title: {
          text: "各媒体类型月积分走势图",
          left: "center",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: legendData,
          top: 40,
        },
        grid: {
          top: "20%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: seriesData,
      };
    },
    // 发稿积分统计 走势图
    async getCustomizeScoreMonthlyTrend() {
      let data = [];
      await Promise.all([
        customizeScoreMonthlyTrend({ mtlx: "图片新闻" }).then((res) => {
          data.push({ name: res.scoreSort.name, score: res.scoreSort.month });
        }),
        customizeScoreMonthlyTrend({ mtlx: "公司要问" }).then((res) => {
          data.push({ name: res.scoreSort.name, score: res.scoreSort.month });
        }),
        customizeScoreMonthlyTrend({ mtlx: "基层动态" }).then((res) => {
          data.push({ name: res.scoreSort.name, score: res.scoreSort.month });
        }),
        customizeScoreMonthlyTrend({ mtlx: "本部要闻" }).then((res) => {
          data.push({ name: res.scoreSort.name, score: res.scoreSort.month });
        }),
        customizeScoreMonthlyTrend({ mtlx: "媒体报道" }).then((res) => {
          data.push({ name: res.scoreSort.name, score: res.scoreSort.month });
        }),
        customizeScoreMonthlyTrend({ mtlx: "长供故事汇" }).then((res) => {
          data.push({ name: res.scoreSort.name, score: res.scoreSort.month });
        }),
        customizeScoreMonthlyTrend({ mtlx: "长供家园" }).then((res) => {
          data.push({ name: res.scoreSort.name, score: res.scoreSort.month });
        }),
      ]).then(() => {
        this.mtxlData = data;
        this.$nextTick(async () => {
          await this.chart4();
        });
      });
    },
  },
};
</script>

<style scoped lang="scss">
.contribute-container {
  display: flex;
  flex-direction: column;
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
    margin-bottom: 10px;
    .spantitle {
      height: 30px;
      line-height: 30px;
      font-weight: 700;
      font-size: 16px;
    }
  }
  @media (max-width: 1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }
}
</style>
